jamdocs[02] 为jamdocs添加上传文件功能

摘要

编写sphinx文档的时候，通常需要插入一些图片。
通过对jamdocs进行二次开发使得可以在jamdocs中上传本地图片和文件。

jamdocs 二次开发特色

jamdocs 是基于jam.py 开发的，jamdocs开发过程中 全程在浏览器中开发就可以了。
开发在 http://118.89.150.227:54322/builder.html 进行编程；
开发在 http://118.89.150.227:54322 预览管理页面效果。
不需要IDE;

builder.html 添加上传按钮

点击task,然后点击index.html,如图：

通过F12 定位到管理页面的 new 按钮。

id: “new-btn”
一共有 3个地方有new-button

    1. div [ templates -> default view -> form-footer] {模板}
    1. div [ topics-view -> modal-body -> modal-footer ] {文件列表窗口}
    1. div [ parameters-view -> -> “form-footer” ] {project 窗口}
      1
      2
      3
      4
      <div class="modal-footer">           
          <button id="new-upload-btn" class="btn" type="button"><i class="icon-plus"></i> New<small class="muted">&nbsp;[Ins]</small></button>
          <button id="new-btn" class="btn" type="button"><i class="icon-plus"></i> New<small class="muted">&nbsp;[Ins]</small></button>
      </div>

在文件列表窗口添加new-upload-btn
保存下，查看管理页面效果,如图：。

在builder.html 页面中开发为upload 按钮添加 点击 功能

点击 task -> Groups -> Journals，选中topics,然后点击client_module 对应的是topic.js

1
2
3
4
5
6
item.view_form.find("#new-btn").off('click.task').on('click', function() {
    new_doc(item);
});  
item.view_form.find("#new-upload-btn").off('click.task').on('click', function() {
        upload_file(item);
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

function upload_file(item) {
    console.log("click upload button");
    function after_upload(server_file_name) {
            var file_id = item.task.server('move_image_file', [item.item_tree.id.value, server_file_name]);
            console.log(file_id);
    
            if (file_id) {  // refresh 
            item.view_panel = item.view_form.find("#view-panel");
            
            // http://118.89.150.227:12345/api   
            // xhr    refresh 
        item.set_order_by(['file_name']);                
            item.filters.type_gt.value = 1;
            item.filters.parent.value = item.item_tree.id.value;
            item.open();
            item.locate('id', file_id);
            item.task.param_dialog.close_edit_form();
            item.task.server('check_files');  // refresh the div of file list.
            setTimeout(
                function () {
                    item.open();
                },  
                100
            );
   
            
            }
            // refresh  
            
        }
    item.task.upload(
                {
                    accept: 'image/*',
                    callback: function(server_file_name) {
                        after_upload(server_file_name)
                    }
                }
            );

}   

function new_doc(item) {
   item.task.param_dialog.get_params(item, 'New file', ['title', 'file_name'], function(result) {
        var file_id = item.task.server('create_doc', [item.item_tree.id.value, result]);
        
... ...)
}

在服务端实现 move_image_file 功能；

在builder页面点击task ->server module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import shutil
def move_image_file(task, dir_id,file_name):
    targetdir=task.cur_project.project_path 
    print(targetdir)
    print(file_name)
#     /home/czq/rdkitcn
# zl2020-02-05_223632.678159.jpg
    topics = task.topics.copy()
    topics.set_where(id=dir_id)
    topics.open()
    path = os.path.join(topics.relative_path.value, topics.file_name.value)
    srcpath=os.path.join(os.getcwd(),'static/files',file_name)
    targetpath=os.path.join(targetdir,path,file_name)
    # copyfile(srcpath,targetpath)
    shutil.move(srcpath,targetpath)
    topics.open()

    return topics.id.value


def create_doc(task, dir_id, file_info):
    file_name = file_info['file_name']
    title = file_info['title']
    topics = task.topics.copy()
    topics.set_where(id=dir_id)
    topics.open()
    ... ...

到这里，上传文件的功能就已经实现了。

编程技巧

光标必须定位在代码中，
ctrl+alt+f 在项目中查找，
ctrl+f 在当前编辑的页面中查找 。